<template>

    
      <div class="baseList">
        <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>
        <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table row-key="index" 
      :data="data" 
      :columns="COLUMNS" 
      :stripe="stripe" 
      :bordered="bordered" 
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'" 
      :size="size" 
      :show-header="showHeader"
       cell-empty-content="-" resizable @row-click="handleRowClick">
            
            <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
          
           
          <!-- 图片预览及展示 -->
      <template #image="{ row }">
          <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image">
                          <img
                               alt="test"
                               :src="row.image"
                               class="tdesign-demo-image-viewer__ui-image--img"
                               />
                          <div
                               class="tdesign-demo-image-viewer__ui-image--hover"
                               @click="open"
                               >
                              <span><BrowseIcon size="1.4em" /> 预览</span>
                          </div>
                      </div>
                  </template>
              </t-image-viewer>
          </div>
      </template>
       
  
       <!-- 价格拼接 -->
       <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
      </template>
  
      <template #op="{ row }">
      <t-space direction="vertical">
      <t-space>
        <t-link theme="danger" hover="color"> 删除 </t-link>
        <t-link theme="success" hover="color"> 编辑 </t-link>
        <t-link theme="danger" hover="color"> 禁用 </t-link>
      </t-space>
    </t-space>
  </template>
          </t-table>
           <!-- 分页 -->
   <t-pagination
    v-if="total > 10"
    v-model="pagination.pageNum"
    v-model:pageSize="pagination.pageSize"
    :total="total"
    @change="onPageChange"
  />
        </div>
      </div>
    
  </template>
  
  <script setup lang="ts">
  
  import { COLUMNS } from '../constants'
  import { ref } from 'vue';
  import TableList  from './components/TableList.vue'
  
  // 子组件需要让父组件传递属性

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // 总条数
    total: {
        type: Number,
        default: 0
    },
    pagination: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
  
const isDecimals = (val) => {
    if (String(val).indexOf('.') > -1) {
        return true
    }
    return false
}
  
  const stripe = ref(true);
  const bordered = ref(true);
  const hover = ref(false);
  const tableLayout = ref(false);
  const size = ref('medium');
  const showHeader = ref(true);
  
  
  
  // 子组件需要调用父组件的方法
//声明方法
const emit = defineEmits([
'onPageChange','handleBulid'
])

//点击翻页
const onPageChange = (val) => {
    emit('onPageChange', val)
}

  //新增按钮
const handleBulid = () =>{
  emit('handleBulid')
  console.log("表格页面接到了点击新增按钮事件")
}
  
  </script>